<template>
  <DepartmentDetail v-if="type === '科室'" :id="id" :key="route.fullPath" />
  <MedicalDeatil v-if="type === '医疗组'" :id="id" :key="route.fullPath" />
  <DoctorDetail v-if="type === '医生'" :id="id" :key="route.fullPath" />
  <DIPDetail v-if="type === 'DRG' || type === 'DIP'" :id="id" :key="route.fullPath" />
</template>

<script setup>
import { ref, onMounted, onActivated, watch } from 'vue'
import { useRoute } from 'vue-router'
import DepartmentDetail from './DepartmentDetail.vue'
import MedicalDeatil from './MedicalDeatil.vue'
import DoctorDetail from './DoctorDetail.vue'
import DIPDetail from './DRGDetail.vue'

const route = useRoute()
const type = ref('')
const id = ref('')

const updateRouteParams = () => {
  type.value = route.query.type || ''
  id.value = route.query.id || ''
}

watch(
  () => route.query,
  () => {
    updateRouteParams()
  },
  { deep: true },
)

onMounted(() => {
  updateRouteParams()
})

onActivated(() => {
  updateRouteParams()
})
</script>
